<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="会员姓名">
        <span>{{ form.memberName }}</span>
      </el-form-item>
      <el-form-item label="会员卡号">
        <span>{{ form.cardCode }}</span>
      </el-form-item>
      <el-form-item label="会员手机号">
        <span>{{ form.memberTelno }}</span>
      </el-form-item>
      <el-form-item label="会员卡余额">
        <span>￥{{ form.balance }}</span>
      </el-form-item>
      <el-form-item label="总充值">
        <span>￥{{ form.allRecharge }}</span>
      </el-form-item>
      <el-form-item label="总消费">
        <span>￥{{ form.allConsume }}</span>
      </el-form-item>
      <el-form-item label="有效期至">
        <span>{{ form.expirationTime }}</span>
      </el-form-item>
      <el-form-item label="退卡金额" prop="refundValue">
        <el-input v-model="form.refundValue" type="number" />
      </el-form-item>
      <el-form-item label="退卡方式" prop="payType">
        <el-select v-model="form.payType" property="支付方式">
          <el-option label="扫码" value="0" />
          <el-option label="现金" value="1" />
          <el-option label="微信" value="2" />
          <el-option label="支付宝" value="3" />
          <el-option label="其他" value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { reactive, watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { refundCard } from '../../../../../api/ven/member'
import { dayjs } from 'element-plus'

const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  },
})
const emit = defineEmits(['submitForm'])

const formBase = {
  expireDateType: '1'
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    refundValue: [{ required: true, message: '必填', trigger: 'blur' }],
    payType: [{ required: true, message: '必填', trigger: 'change' }],
  }
})
const { open, title } = toRefs(props.props)
const { form, rules } = toRefs(data)

watch(open, (val) => {
  if (val) {
    const { id, expirationTime, memberName,memberTelno, balance, cardCode ,allRecharge,allConsume,status} = props.props.member
    form.value = _.assign({
      memberId: id,
	  status,
      memberName,
	  memberTelno,
      balance,
      cardCode,
	  allRecharge,
	  allConsume,
      expirationTime
    }, { ...formBase })
  } else {
    proxy.resetForm('dialogRef')
  }
})



function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      refundCard(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped>

</style>
